<template>
  <com-header title="生成订单"></com-header>
  <van-row
    justify="space-between"
    align="center"
    class="padded-10"
    @click="stateAddress"
  >
    <van-col>
      <div class="text-3 p-b-5">
        <span v-text="address?.name" class="p-r-10"></span>
        <span v-text="address?.phone"></span>
      </div>
      <div class="text-3" v-text="address?.address"></div>
    </van-col>
    <van-col>
      <van-icon name="arrow" size="18" />
    </van-col>
  </van-row>
  <van-row
    class="cart-item bg-f"
    type="flex"
    justify="space-between"
    align="center"
    v-for="(item, index) in order"
  >
    <van-col :span="6">
      <div class="img">
        <img :src="item.pict_url" alt="" />
      </div>
    </van-col>
    <van-col :span="18" class="content p-l-10">
      <div class="ftn14 van-ellipsis">{{ item.title }}</div>
      <van-row class="p-t-10">
        <van-col :span="12" class="text-green"
          >￥{{ item.quanhou_jiage }}</van-col
        >
      </van-row>
    </van-col>
  </van-row>
  <van-sticky position="bottom" offset-bottom="0">
    <footer class="padded-10 van-hairline--top">
      <van-row type="flex" justify="space-between" align="center">
        <van-col :span="4"> 商品金额 </van-col>
        <van-col :span="20" class="text-right">
          <span class="p-r-10 text-green ftn18">￥{{ price }}</span>
        </van-col>
      </van-row>
      <van-button type="primary" size="large" @click="showShare = true"
        >生成订单</van-button
      >
    </footer>
  </van-sticky>
  <van-share-sheet
    v-model:show="showShare"
    title="支付方式"
    :options="options"
    @select="onSelect"
  />
</template>
<script lang="ts">
import { defineComponent, onMounted, ref } from "vue";
import { useStore } from "@/stores/store";
import { useRouter } from "vue-router";
import type { IAddress } from "@/types";
import alipay from "@/assets/image/alipay.png";
import { fnMsg } from "@/plugins/common";
export default defineComponent({
  setup(props, ctx) {
    const store = useStore(),
      address = ref<IAddress>(),
      order = ref(),
      showShare = ref(false),
      router = useRouter();
    const options = [
      { name: "微信", icon: "wechat" },
      { name: "支付宝", icon: alipay },
    ];
    const onSelect = () => {
      showShare.value = false;
      fnMsg("支付成功");
      setTimeout(() => {
        router.push({
          name: "order",
        });
      }, 1000);
    };
    const stateAddress = () => {
      router.push({
        name: "address",
      });
    };
    let price = ref();
    onMounted(() => {
      let [param] = store.state.addressData.list.filter(
        (item: IAddress) => item.default
      );
      address.value = param;
      let { list, total_price } = store.state.orderData;
      (order.value = list), (price.value = total_price);
    });

    return {
      address,
      order,
      price,
      showShare,
      options,
      onSelect,
      stateAddress
    };
  },
});
</script>

<style lang="less" scoped>
.cart-item {
  border-bottom: 1px solid #eee;
  padding: 15px 20px;
  .img {
    position: relative;
    width: 100%;
    overflow: hidden;
    img {
      width: 100%;
    }
  }
}
footer {
  position: fixed !important;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
}
</style>
